import React from 'react';
import { Play } from 'lucide-react';
import FileUpload from './FileUpload';
import DataSettings from './DataSettings';
import DataPreview from './DataPreview';
import { AppState } from '../../types';

interface DataInputTabProps {
  data: AppState['data'];
  onUpdateData: (updates: Partial<AppState['data']>) => void;
  onFileSelect: (file: File) => void;
  onStartAnalysis: () => void;
  onOptimizeHyperparams: () => void;
  isTraining: boolean;
  isOptimizing: boolean;
}

const DataInputTab: React.FC<DataInputTabProps> = ({
  data,
  onUpdateData,
  onFileSelect,
  onStartAnalysis,
  onOptimizeHyperparams,
  isTraining,
  isOptimizing,
}) => {
  const isLoading = data.isLoading || isTraining || isOptimizing;
  const canStartAnalysis = !!data.data && data.data.length > 0 && data.endRow > data.startRow;

  return (
    <div className="space-y-6 p-4">
      <div className="grid gap-6 md:grid-cols-2">
        <div>
          <h3 className="text-lg font-medium text-gray-800 mb-3">Data Source</h3>
          <FileUpload
            onFileSelect={onFileSelect}
            fileName={data.fileName || null}
            isLoading={isLoading}
          />
        </div>

        <div>
          <h3 className="text-lg font-medium text-gray-800 mb-3">Configuration</h3>
          <DataSettings
            data={data}
            onUpdateSettings={onUpdateData}
            isLoading={isLoading}
          />
        </div>
      </div>

      <DataPreview data={data} />

      <div className="flex flex-wrap gap-4 justify-end">
        <button
          className={`px-4 py-2 rounded-md font-medium text-white bg-teal-600 hover:bg-teal-700 transition-colors
            flex items-center gap-2 ${(isLoading || !canStartAnalysis) ? 'opacity-50 cursor-not-allowed' : ''}`}
          onClick={onOptimizeHyperparams}
          disabled={isLoading || !canStartAnalysis}
        >
          {isOptimizing ? 'Optimizing...' : 'Optimize Hyperparameters'}
        </button>
        
        <button
          className={`px-4 py-2 rounded-md font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors
            flex items-center gap-2 ${(isLoading || !canStartAnalysis) ? 'opacity-50 cursor-not-allowed' : ''}`}
          onClick={onStartAnalysis}
          disabled={isLoading || !canStartAnalysis}
        >
          <Play size={18} />
          {isTraining ? 'Training...' : 'Analyze & Predict'}
        </button>
      </div>
    </div>
  );
};

export default DataInputTab;